<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>首页</title>
  <script src="js/mui.min.js"></script>
  <link href="css/mui.min.css" rel="stylesheet" />
  <link href="css/style.css" rel="stylesheet" />
  <style>
    html,
    body {
      background-color: #fff;
    }

    .warp-search {
      margin: 15px;
      background: #e6e6e6;
      height: 30px;
      border-radius: 5px;
      text-align: center;
    }

    .item-img {
      width: 60px;
      height: 90px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="mui-content" style=" background:#fff;"">
      <!-- 搜索栏 -->
      <div class=" warp-search">
    <span class="mui-icon mui-icon-search" style="line-height: 30px; color: #AAA;font-size: 16px;"></span>
    <span style="line-height: 30px; color: #AAA;font-size: 14px;">电影/电视剧/电影人</span>
  </div>
  <!-- 列表 -->
  <div class="mui-scroll-wrapper" id="refreshContainer" style="top: 50px">
    <div class="mui-scroll">
      <ul id="movies" lass="mui-table-view">
        <li class="mui-table-view-cell" v-for="item in movies">
          <img :src="item.cover" class="item-img mui-pull-left" alt="">
          <div class="mui-ellipsis drak-big">{{item.title}}</div>
          <div class="mui-ellipsis">
            <span class="gray-small">{{item.genres}}</span>&nbsp;
            <span v-if="item.score>0" class="orange-small">{{item.score}}分</span>
            <span v-else class="orange-small">暂无评分</span>
          </div>
          <div class="mui-ellipsis gray-small">导演：{{item.directors}}</div>
          <div class="mui-ellipsis gray-small">主演：{{item.casts}}</div>
        </li>
      </ul>
    </div>
  </div>
  </div>

  <script src="js/util.js"></script>
  <script src="js/vue.js"></script>
  <script type="text/javascript">
    (function () {
      mui.init({
        swipeBack: true, //启用右滑关闭功能
        pullRefresh: {
          container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: {
            auto: false,
            callback: refreshData,
          },
          up: {
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: true, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: loadMovieData, //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
          }
        }
      });
    // 下拉刷新数据
    function refreshData() { 
      mui.getJSON('https://douban.uieee.com/v2/movie/in_theaters', {
        start: 0,
        count: 10
      }, function (res) {
      data_movies.movies.splice(0,data_movies.movies.length);
      data_movies.movies = data_movies.movies.concat(convert(res.subjects));
      mui('#refreshContainer').pullRefresh().endPullupToRefresh();
      mui('#refreshContainer').pullRefresh().refresh(true);
    });
    };
  
  // 上拉加载
        function loadMovieData() { 
      mui.getJSON('https://douban.uieee.com/v2/movie/in_theaters', {
        start: data_movies.movies.length,
        count: 10
      }, function (res) {
      data_movies.movies = data_movies.movies.concat(convert(res.subjects));
      mui('#refreshContainer').pullRefresh().enablePullupToRefresh(data_movies.movies.length > res.total);
    });
    };
      
      mui.plusReady(function () {
        var self = plus.webview.currentWebview();

        // 创建子webview窗口 并初始化
        var aniShow = {};
        util.initSubpage(aniShow);

        var nview = plus.nativeObj.View.getViewById('tabBar'),
          activePage = plus.webview.currentWebview(),
          targetPage,
          subpages = util.options.subpages,
          pageW = window.innerWidth,
          currIndex = 0;


        /**
         * 根据判断view控件点击位置判断切换的tab
         */
        nview.addEventListener('click', function (e) {
          var clientX = e.clientX;
          if (clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
            currIndex = 0;
          } else if (clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
            currIndex = 1;
          } else if (clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
            currIndex = 2;
          } else {
            currIndex = 3;
          }
          // 匹配对应tab窗口	
          if (currIndex > 0) {
            targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
          } else {
            targetPage = plus.webview.currentWebview();
          }

          if (targetPage == activePage) {
            return;
          }

          if (currIndex !== 3) {
            //底部选项卡切换
            util.toggleNview(currIndex);
            // 子页面切换
            util.changeSubpage(targetPage, activePage, aniShow);
            //更新当前活跃的页面
            activePage = targetPage;
          };
        });
      });
    })();

    // vue数据
    var data_movies = new Vue({
      el: '#movies',
      data: {
        movies: []
      }
    });

    // 搜索框添加点击事件
    mui('.warp-search')[0].addEventListener('tap', function () {
      console.log(22)
    });

    mui('.mui-scroll-wrapper').scroll({
      indicator: false
    });

    // 请求数据接口
    mui.getJSON('https://douban.uieee.com/v2/movie/in_theaters', {}, function (res) {
      data_movies.movies = convert(res.subjects);
    });

    function convert(items) {
      var newItems = [];
      items.forEach(function (item) {
        var genres = item.genres.toString().replace(/,/g, '|');
        // 导演
        var directors = '';
        for (var i = 0; i < item.directors.length; i++) {
          directors += item.directors[i].name;
          if (i != item.directors.length - 1) {
            directors += '/';
          }
        }
        // 演员
        var casts = '';
        for (var i = 0; i < item.casts.length; i++) {
          casts += item.casts[i].name;
          if (i != item.casts.length - 1) {
            casts += '/';
          }
        }

        newItems.push({
          id: item.id,
          title: item.title,
          genres: genres, //类型
          cover: item.images.large, //封面
          score: item.rating.average, //分数
          directors: directors, //导演
          casts: casts //演员
        });
      });
      return newItems;
    }
  </script>
</body>

</html>